<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        text-align: center;
    }

    #mtCanvas {
        background-color: #eee;
    }
</style>

<body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <canvas id="myCanvas1"></canvas>
</body>
<script>
    // 获取到画布元素
    let myCanvas = document.getElementById('myCanvas');
    // 通过画布元素获取到上下文（画笔）
    let ctx = myCanvas.getContext('2d');

    // 右边白色的半圆
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
    ctx.fill();

    // 左边黑色的圆
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
    ctx.fill();

    // 左边白色的小圆
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
    ctx.fill();

    // 右边黑色的小圆
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
    ctx.fill();

    // 黑色小圆点
    ctx.fillStyle = 'black'
    ctx.beginPath();
    ctx.arc(300, 250, 5, 0, Math.PI * 2);
    ctx.fill();

    // 白色小圆点
    ctx.fillStyle = 'white';
    ctx.beginPath();
    ctx.arc(300, 350, 5, 0, Math.PI * 2);
    ctx.fill();

</script>

</html>